<template>
	<div>
		<div v-if="query.studentId === '' || query.studentId === null">
			<div class="my-code">点击学生查看指导详情</div>
		</div>
		<div v-else>
			<!--表单组件-->
			<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
				:title="crud.status.title" width="500px">
				<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
					<el-row :gutter="0.5">
						<el-col :span="12">
							<el-form-item label="老师">
								<el-tag>{{ form.teacherName }}</el-tag>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="学生">
								<el-tag>{{ studentName }}</el-tag>
							</el-form-item>
						</el-col>
					</el-row>

					<el-form-item label="指导时间">
						<el-date-picker v-model="form.date" type="datetime" style="width: 370px;" />
					</el-form-item>
					<el-form-item label="指导主题">
						<el-input v-model="form.title" style="width: 370px;" />
					</el-form-item>
					<el-form-item label="指导内容">
						<el-input v-model="form.content" :rows="3" type="textarea" style="width: 370px;" />
					</el-form-item>
					<el-form-item label="状态" v-if="form.guidanceId != null">
						<el-radio v-model="form.enabled" v-for="item in dict.data_status" :key="item.id"
							:label="item.value">{{ item.label }}</el-radio>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="text" @click="crud.cancelCU">取消</el-button>
					<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
				</div>
			</el-dialog>

			<!--工具栏-->
			<div class="head-container">
				<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
				<crudOperation :permission="permission" />
				<!--表格渲染-->
				<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
					@selection-change="crud.selectionChangeHandler">
					<el-table-column type="selection" width="45" />
					<el-table-column prop="teacher.name" label="老师" width="60"/>
					<el-table-column prop="student.name" label="学生" width="60"/>
					<el-table-column prop="title" label="指导主题" />
					<!-- <el-table-column prop="content" label="指导内容" />
							<el-table-column prop="enabled" label="状态">
								<template slot-scope="scope">
									{{ dict.label.data_status[scope.row.enabled] }}
								</template>
							</el-table-column> -->
					<el-table-column prop="date" label="指导时间" width="135"/>
					<el-table-column v-if="checkPer(['admin','guidance:edit','guidance:del'])" label="操作" width="115px"
						align="center">
						<template slot-scope="scope">
							<udOperation :data="scope.row" :permission="permission" />
						</template>
					</el-table-column>
				</el-table>
				<!--分页组件-->
				<pagination />
			</div>

		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import crudGuidance from '@/api/guidance'
	import CRUD, {
		presenter,
		header,
		form,
		crud
	} from '@crud/crud'
	import crudOperation from '@crud/CRUD.operation'
	import udOperation from '@crud/UD.operation'
	import pagination from '@crud/Pagination'
	import {
		getTeacher
	} from '@/api/teacher'

	const defaultForm = {
		guidanceId: null,
		teacherId: null,
		teacherName: null,
		studentId: null,
		date: new Date(),
		title: null,
		content: null,
		enabled: 'true'
	}
	export default {
		name: 'guidanceInfo',
		components: {
			pagination,
			crudOperation,
			udOperation
		},
		mixins: [presenter(), header(), form(defaultForm), crud()],
		dicts: ['data_status'],
		cruds() {
			return CRUD({
				title: '精准就业指导',
				url: 'api/guidance',
				query: {
					studentId: ''
				},
				idField: 'guidanceId',
				sort: 'guidanceId,desc',
				crudMethod: {
					...crudGuidance
				},
				optShow: {
					add: true,
					edit: true,
					del: true,
					reset: false
				},
                queryOnPresenterCreated: false
			})
		},
		data() {
			return {
				studentName: null,
				permission: {
					add: ['admin', 'guidance:add'],
					edit: ['admin', 'guidance:edit'],
					del: ['admin', 'guidance:del']
				},
				rules: {}
			}
		},
		computed: {
			...mapGetters([
				'user'
			])
		},
		methods: {
			// 钩子：在获取表格数据之前执行，false 则代表不获取数据
			[CRUD.HOOK.beforeRefresh]() {
				return true
			},
			[CRUD.HOOK.afterToCU](crud, form) {
				getTeacher({
					userId: this.user.id
				}).then(res => {
					if (res.content.length >= 1) {
						console.log(res)
						this.teacher = res.content[0]
						form.teacherId = this.teacher.teacherId
						form.teacherName = this.teacher.name
					}
				})

				form.enabled = `${form.enabled}`
				form.studentId = this.query.studentId
			}
		}
	}
</script>

<style scoped>

</style>
